import React, { useEffect, useState } from "react";
import instance from "../../api/request";
import { Space, Table, Tag } from "antd";
import type { TableProps } from "antd";
import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input } from "antd";
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
type FieldType = {
    keyword?: string;
    content?: string;
  remember?: string;
};
function Index() {
  const [data, setData] = useState([]);
  const [title,setTitle]=useState()
  const [nei,setNei]=useState()
  const getData = () => {
    const params={}
    if(title) params.keyword=title
    if(nei) params.content=nei
    instance.get("/article/list",{params}).then((res) => {
      if (res.data.rows) {
        setData(res.data.rows);
      }
    });
  };

  useEffect(() => {
    getData();
  }, [title,nei]);
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
    setTitle(values.title)
    setNei(values.nei)
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  const [columns] = useState<TableProps<DataType>["columns"]>([
    {
      title: "id",
      dataIndex: "id",
      key: "id",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "内容",
      dataIndex: "content",
      key: "content",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
    },
    {
      title: "修改时间",
      dataIndex: "updatedAt",
      key: "updatedAt",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <button>编辑</button>
          <button>删除</button>
        </Space>
      ),
    },
  ]);

  return (
    <div>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        layout="inline"
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType> label="标题" name="title">
          <Input />
        </Form.Item>

        <Form.Item<FieldType> label="内容" name="content">
          <Input />
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
      <Table<DataType> columns={columns} dataSource={data} />
    </div>
  );
}

export default Index;
